<template>
  <div>
    <!-- 提示编辑部分 -->
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <el-alert title="说明：目前支持学科和关键字条件筛选" type="error" :closable="false" />
      </el-col>
      <el-col :span="6" :push="3">
        <el-button type="success" icon="el-icon-edit" @click="addTest">新增试题</el-button>
      </el-col>
    </el-row>
    <!-- ref="form" :model="form" -->
    <!-- 下拉选框表单部分 -->
    <el-form style="margin-top: 20px" :model="subForm">
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <el-form-item label="学科" label-width="80px" prop="subject">
            <el-select placeholder="请选择" v-model="subForm.subject">
              <el-option v-for="item in subList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" label-width="80px" prop="directory">
            <el-select placeholder="请选择" v-model="subForm.directory">
              <el-option v-for="item in DirList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" label-width="80px" prop="label">
            <el-select placeholder="请选择" v-model="subForm.label">
              <el-option v-for="item in TagsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" label-width="80px" prop="keyword">
            <el-input placeholder="根据题干搜索" v-model="subForm.keyword"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <el-form-item label="试题类型" label-width="80px" prop="testingTypes">
            <el-select placeholder="请选择" v-model="subForm.testingTypes">
              <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" label-width="80px" prop="difficulty">
            <el-select placeholder="请选择" v-model="subForm.difficulty">
              <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" label-width="80px" prop="direction">
            <el-select placeholder="请选择" v-model="subForm.direction">
              <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" label-width="80px" prop="enter">
            <el-select placeholder="请选择" v-model="subForm.enter">
              <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <el-form-item label="题目备注" label-width="80px" prop="note">
            <el-input placeholder="" v-model="subForm.note"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" label-width="80px" prop="enterprise">
            <el-input placeholder="" v-model="subForm.enterprise"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" label-width="80px" prop="provinces">
            <el-select placeholder="请选择" style="width: 45%" v-model="subForm.provinces">
              <el-option v-for="(item, index) in provincesList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
            <el-select placeholder="请选择" style="width: 45%; margin-left: 7px" v-model="subForm.citys" v-if="subForm.provinces">
              <el-option v-for="(item, index) in citysList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" :push="3">
          <el-button size="small" @click="clearAll">清除</el-button>
          <el-button type="primary" size="small" @click="search">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-alert v-if="showMessage" type="info" show-icon :closable="false">
      <span slot="title"> 数据一共{{counts}}条 </span>
    </el-alert>
  </div>
</template>
<script>
import { simple } from '@/api/hmmm/subjects'
import { simple as simpleTags } from '@/api/hmmm/tags'
import { simple as simpleDir } from '@/api/hmmm/directorys'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import { list } from '@/api/base/users'
export default {
  props: {
    // 父子传值得到
    showMessage: {
      type: Boolean,
      default: true
    },
    counts: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      subList: [],
      value: '',
      subForm: {
        subject: '', // 学科
        directory: '', // 二级目录
        label: '', // 标签
        keyword: '', // 关键字
        testingTypes: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        enter: '', // 录入人
        note: '', // 题目备注
        enterprise: '', // 企业简称
        provinces: '', // 市区
        citys: '' // 地区
      },
      difficulty, // 困难程度
      questionType, // 试题类型
      direction, // 方向
      provincesList: [], // 城市
      citysList: [], // 地区
      TagsList: [], // 标签列表
      DirList: [], // 目录列表
      userList: [] // 录入人
    }
  },
  created () {
    this.getSimpleList()
    this.provinces()
    this.getUserList()
  },
  methods: {
    //   获取学科列表
    async getSimpleList () {
      try {
        const { data } = await simple()
        this.subList = data
        // console.log(this.subList)
      } catch (error) {
        console.log(error)
      }
    },
    // 获取标签列表
    async getTagsList (v) {
      try {
        const { data } = await simpleTags({
          subjectID: v
        })
        this.TagsList = data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取目录列表
    async getDirList (v) {
      try {
        const { data } = await simpleDir({
          subjectID: v
        })
        this.DirList = data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取用户的列表
    async getUserList () {
      try {
        const { data } = await list()
        this.userList = data.list
      } catch (error) {
        console.log(error)
      }
    },
    // 获取地区列表
    provinces () {
      this.provincesList = provinces()
    },
    // 定义一个区域方法
    citys (v) {
      this.citysList = citys(v)
      //   console.log(this.citysList)
    },
    // 清除按钮
    clearAll () {
      this.subForm = {
        subject: '', // 学科
        directory: '', // 二级目录
        label: '', // 标签
        keyword: '', // 关键字
        testingTypes: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        enter: '', // 录入人
        note: '', // 题目备注
        enterprise: '', // 企业简称
        provinces: '', // 市区
        citys: '' // 地区
      }
    },
    // 搜索按钮
    search () {
      this.$emit('search', this.subForm)
    },
    // 新增试题
    addTest () {
      this.$emit('addTest')
    }
  },
  watch: {
    //   监听地区变化
    'subForm.provinces': {
      handler (v) {
        this.citys(v)
      },
      immediate: true,
      deep: true
    },
    // 监听学科
    'subForm.subject': {
      handler (v) {
        this.getDirList(v)
        this.getTagsList(v)
        this.subForm.directory = ''
        this.subForm.label = ''
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
</style>
